<template>
    <view>
        <view class="share-box">
            <view class="swiper-box">
                <view v-for="(item,index) in posters" :key="index">
                    <canvas style="width: 375px; height: 667px;" class="position-hidden" :canvas-id="'canvas_' + index"
                        :id="'canvas_' + index"></canvas>
                    <canvas style="width:  120px; height: 120px;" :canvas-id="'qrcode_' + index" :id="'qrcode_' + index"
                        class="position-hidden"></canvas>
                </view>

                <swiper :indicator-dots="true" :autoplay="autoplay" :interval="interval" :duration="duration"
                    @change="changeSwiper">
                    <swiper-item v-for="(item,index) in qrimgList" :key="index">
                        <view class="swiper-item">
                            <image :src="item.img" mode="widthFix"></image>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
            <!-- #ifdef APP -->
            <button @click="shareToggle" class="shareBtn">分享</button>
            <!-- #endif -->
            <!-- #ifdef H5 -->
            <button @click="save" class="shareBtn">保存转发二维码图片</button>
            <!-- #endif -->
            <view>
                <!-- 分享示例 -->
                <uni-popup ref="share" type="bottom" safeArea backgroundColor="#fff">
                    <uni-popup-share @select="change"></uni-popup-share>
                </uni-popup>
            </view>
        </view>
    </view>
</template>

<script>
    import uQRCode from '@/common/uqrcode.js';
    export default {
        data() {
            return {
                indicatorDots: true,
                autoplay: false,
                interval: 2000,
                duration: 500,
                qrimgList: [],
                current: 0
            };
        },
        onLoad(option) {
            this.getqrImg()
        },
        methods: {
            changeSwiper(e) {
                this.current = e.detail.current
            },
            getqrImg() {
                this.$api.get({
                    url: '/wanlshop/common/qrcode',
                    success: (res) => {
                        this.qrimgList = res
                    },
                    fail: res => {}
                })
            },
            genQrCode() {
                // 生成二维码
                uQRCode.make({
                    canvasId: 'qrcode',
                    text: "this.QRCodeText",
                    size: 104,
                    success: res => {
                        this.QRCodeSrc = res;
                        // 默认生成第一张海报
                        this.create(this.posterTemplates[0]);
                    }
                });
            },
            genPosters(item) {
                console.log(options);
                console.log('poster')
                let {
                    canvas_width,
                    canvas_height,
                    background_src,
                    qrcode_src,
                    canvas_id,
                    index,
                    margin,
                } = item;
                background_src = this.$m.oss(background_src);
                canvas_width = 375;
                canvas_height = 667;
                margin = 8;

                console.log(canvas_id)
                var ctx = uni.createCanvasContext(canvas_id, this)
                ctx.clearRect(0, 0, canvas_width, canvas_height);
                ctx.rect(0, 0, canvas_width, canvas_height);
                // // 获取背景图片信息
                let backgroundImageInfo = {
                    width: canvas_width,
                    height: canvas_height
                };
                // // 设置背景图片宽高
                let backgroundWidth = canvas_width;
                let backgroundHeight = (backgroundImageInfo.height * canvas_width) / backgroundImageInfo.width;
                console.log(background_src)
                ctx.drawImage(background_src, 0, 0, backgroundWidth, backgroundHeight);

                let logoWidth = 100;
                let logoHeight = 100;
                let logoX = 26;
                let logoY = 550;
                ctx.fillStyle = "#ffffff";
                ctx.fillRect(logoX, logoY, logoWidth, logoHeight);
                console.log(qrcode_src)
                ctx.drawImage(qrcode_src, logoX + margin, logoY + margin, logoWidth - margin * 2, logoHeight - margin *
                    2);
                ctx.draw()

                const that = this;
                setTimeout(() => {
                    uni.canvasToTempFilePath({
                        canvasId: canvas_id,
                        success: function(res) {
                            console.log(res.tempFilePath)
                            that.qrcodesTmp[index] = res.tempFilePath
                            console.log(that.qrcodesTmp.length)
                            if (that.qrcodesTmp.length == that.posters.length) {
                                that.qrcodes = that.qrcodesTmp;
                                uni.hideLoading()
                            }
                        }
                    })
                }, 400)
            },
            change(e) {
                if (e.index == 0) {
                    this.share()
                }
            },
            shareToggle() {
                this.$refs.share.open()
            },
            share() {
                // #ifdef APP-PLUS
                if (this.qrimgList[this.current].type == 0) {
                    uni.share({
                        provider: "weixin",
                        scene: "WXSceneSession",
                        type: 0,
                        href: this.qrimgList[this.current].url,
                        title: "好饰商家版",
                        summary: "装修设计建材一站式全屋定制平台",
                        imageUrl: this.qrimgList[this.current].img,
                        success: function(res) {
                            console.log("success:" + JSON.stringify(res));
                            uni.$u.toast('分享成功')
                        },
                        fail: function(err) {
                            uni.$u.toast('分享失败')
                            console.log("fail:" + JSON.stringify(err));
                        }
                    });
                } else {
                    uni.share({
                        provider: "weixin",
                        scene: "WXSceneSession",
                        type: 2,
                        imageUrl: this.qrimgList[this.current].img,
                        success: function(res) {
                            console.log("success:" + JSON.stringify(res));
                        },
                        fail: function(err) {
                            console.log("fail:" + JSON.stringify(err));
                        }
                    });
                }
                // #endif
            },
            changeIndicatorDots(e) {
                this.indicatorDots = !this.indicatorDots
            },
            changeAutoplay(e) {
                this.autoplay = !this.autoplay
            },
            intervalChange(e) {
                this.interval = e.target.value
            },
            durationChange(e) {
                this.duration = e.target.value
            },
        }
    };
</script>

<style>
    .share-box {
        padding: 50rpx 0;
        width: 100%;
        height: 100%;
    }

    .share-icon {
        display: flex;
        justify-content: left;
        align-items: center;
        width: 750rpx;
        height: 150rpx;
    }

    .weixin {
        width: 25%;
        height: 100%;
        text-align: center;
        padding: 13rpx 0;
    }

    .swiper-box {
        height: 600px;
        padding: 0 40rpx;
    }

    .shareBtn {
        margin: 20px auto;
        color: #FFF;
        font-weight: 550;
        width: 670rpx;
        height: 63rpx;
        border-radius: 46px;
        opacity: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 6px 10px;
        gap: 10px;
        background: linear-gradient(104deg, #FFA64C 16%, #FD9328 51%, #FD8913 79%);
        box-shadow: 0px 4px 10px 0px rgba(254, 137, 19, 0.3);
        z-index: 0;
    }

    .uni-margin-wrap {
        width: 690rpx;
        width: 100%;
    }

    uni-swiper {
        display: block;
        height: 100%;
    }

    .swiper-item {
        display: block;
        height: 100%;
        line-height: 300rpx;
        text-align: center;
    }

    .swiper-item image {
        width: 100%;
        height: 100%;
    }

    .swiper-list {
        margin-top: 40rpx;
        margin-bottom: 0;
    }

    .uni-common-mt {
        margin-top: 60rpx;
        position: relative;
    }

    .info {
        position: absolute;
        right: 20rpx;
    }

    .uni-padding-wrap {
        width: 550rpx;
        padding: 0 100rpx;
    }

    .position-hidden {
        position: fixed;
        top: 0;
        right: -375px;
    }
</style>